<template>
	<div>
		<div class="tabs">
			<el-tabs
				v-model="listType"
				class="question-tabs"
				@tab-click="onChangeListType"
			>
				<el-tab-pane label="全部打点记录" name="all" />
				<el-tab-pane label="知识点打点记录" name="K" />
				<el-tab-pane label="试题打点记录" name="Q" />
			</el-tabs>
		</div>
		<div class="dot-list" v-loading="listLoading">
			<template v-for="dot in dotList">
				<video-card
					:key="dot.resourceVideoDotId"
					:dot-data="dot"
					:resource-id="resourceId"
					v-bind="$attrs"
					@delete-success="api_reloadList"
					@update-success="getDotList"
					:polyv-token="polyvToken"
				/>
			</template>
			<template v-if="isFinished && !dotList.length">
				<div class="empty">
					<span class="empty-txt">暂无数据</span>
				</div>
			</template>
		</div>
		<ve-pagination :get-page="getDotList" :page.sync="page" />
	</div>
</template>
<script>
import coursewareApi from "@rc/apis/rc/courseware.mjs";
import VideoCard from './video-card/index.vue';
export default {
    name:'doc-list',
    components:{
        VideoCard
    },
    props: {
        resourceId: {
            type: String,
            required: true
        },
        polyvToken: {
            type: String,
            default: '',
        }
	},
    watch: {
        resourceId: {
            handler(val) {
                val && this.getDotList();
            },
            immediate: true
        },
	},
    data(){
        return {
            listType:'all',
            dotList:[],
            listLoading:false,
            isFinished:false,
            page: {
                pageIndex: 0,
                pageSize: 10,
                pageCount: 0
			}
        };
    },
    methods:{
        onChangeListType(){
            this.api_reloadList();
        },
        api_reloadList(){
            this.page = {
                pageIndex: 0,
                pageSize: this.page.pageSize,
                pageCount: 0
			};
            this.getDotList();
        },
        getDotList(){
            let params = {
                resourceId: this.resourceId,
                pageIndex: PageUtil.getStartIndex(this.page),
                pageSize: this.page.pageSize,
            };
            if(this.listType!=='all'){
                params.associatedContentType = this.listType;
            }
            this.listLoading = true;
            this.isFinished = false;
            this.dotList=[];
            coursewareApi.queryResourceVideoDotList({
                data: {
                    ...params
                },
                success: (res) => {
                    this.dotList = res.data;
                    this.page.pageCount =res.count;
                },
                complete: () => {
                    this.isFinished = true;
                    this.listLoading = false;

                }
			});
        }
    }
};
</script>
<style lang="less" scoped>
    .empty{
        width: 100%;
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        .empty-txt{
            color: #666;
        }
    }
    .dot-list{
        display: flex;
        flex-wrap: wrap;
        min-height: 350px;
    }
</style>
